<template>
    <div class="container">
        <!-- <div class="searchboxBox">

            <div class="searchbox">
                <input
                class="searchBar"
                type="text"
                autofocus="false"
                placeholder="搜索"
                value="">
                </input>
                <icon class="searchIcon" :eeui="{content:'ios-search'}"></icon>
            </div>
        
        </div> -->
        <wxc-searchbar ref="wxc-searchbar" class="searchboxBox"
                     @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                     @wxcSearchbarInputReturned="wxcSearchbarInputReturned"
                     @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"
                     @wxcSearchbarCloseClicked="wxcSearchbarCloseClicked"
                     @wxcSearchbarInputOnFocus="wxcSearchbarInputOnFocus"
                     @wxcSearchbarInputOnBlur="wxcSearchbarInputOnBlur"></wxc-searchbar>


        <div class="studentTabbool">
            <div class="boolLeft">
                <text class="boolLeftword">按学号</text>
            </div>
            <div class="boolCenter">
                <text class="rx">允许加入</text>
                <switch class="switch" :checked="loading" @change="loading = !loading"></switch>
            </div>
            <button class="button" :eeui="{text:'签到', model:'green'}"></button>
        
        </div>

        <div class="list-input-item">
                <text class="rx">授课老师</text>
                <text class="num1">1</text>
                <icon class="downIcon" :eeui="{content:'ios-arrow-down'}"></icon>
            </div>

            <div class="Downinnerbox">
                <image class="imgDowninnerbox" src="https://oss.asyke.com/user/1/userInfo/image/0286b87b2f1439b2443f9f5bb7e5f476.png" style="width:76px;height:76px"></image>
                <text class="Downinnertext">略略略</text>
                <icon class="DowninnerIcon" :eeui="{content:'tb-message',fontSize:38}"></icon>
            </div>

            <div class="list-input-item">
                <text class="rx">协同老师</text>
                <text class="num1">0</text>
                <icon class="downIcon" :eeui="{content:'ios-arrow-down'}"></icon>
            </div>

            <div class="list-input-item">
                <text class="rx">学生</text>
                <text class="num1">4</text>
                <icon class="downIcon" :eeui="{content:'ios-arrow-down'}"></icon>
            </div>

             <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:76px;height:76px"></image>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">刘启林</text>
                        <text class="resultShowCneterWorldTit2">201630807</text>
                        
                        
                        
                    </div>
                    
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <text class="sendPushBtn">未分组</text>
                            <icon class="sendpushIcon" :eeui="{content:'md-arrow-dropdown',fontSize:38}"></icon>
                            
                        </div>
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:40}"></icon>
            </div>
            <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:76px;height:76px"></image>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">刘启林</text>
                        <text class="resultShowCneterWorldTit2">201630807</text>
                        
                        
                        
                    </div>
                    
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <text class="sendPushBtn">未分组</text>
                            <icon class="sendpushIcon" :eeui="{content:'md-arrow-dropdown',fontSize:38}"></icon>
                            
                        </div>
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:40}"></icon>
            </div>
            <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:76px;height:76px"></image>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">刘启林</text>
                        <text class="resultShowCneterWorldTit2">201630807</text>
                        
                        
                        
                    </div>
                    
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <text class="sendPushBtn">未分组</text>
                            <icon class="sendpushIcon" :eeui="{content:'md-arrow-dropdown',fontSize:38}"></icon>
                            
                        </div>
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:40}"></icon>
            </div>


        
       
    </div>
</template>
<script>
    import { WxcSearchbar } from 'weex-ui';
    const eeui = app.requireModule('eeui');
     export default {
         components: { WxcSearchbar },
         data(){
             return{
                value: ''
             }
         },
          methods: {
            wxcSearchbarInputOnFocus () {
            },
            wxcSearchbarInputOnBlur () {
            },
            wxcSearchbarInputReturned (){
            },
            wxcSearchbarCloseClicked () {
            },
            wxcSearchbarInputOnInput (e) {
                this.value = e.value;
            },
            wxcSearchbarCancelClicked () {
            },
            wxcSearchbarInputDisabledClicked () {
            },
            wxcSearchbarDepChooseClicked () {
            }
        }
     }
</script>
<style scoped>
.container{
    width: 750;
    background-color: #fff;
}
.searchBar{
    width: 620;
    height: 60;
    padding-left: 10px;
    font-size: 24px;
    
}
.searchbox{
    width: 689;
    height: 60;
    background-color: #fff;
    align-self: center;
    border-radius: 4;
    flex-direction: row;
    
}
.searchboxBox{
    margin-top: 10px;
}
.searchIcon{
    width: 60;
    height: 60;
    color: #999;
}
.studentTabbool{
    width: 710;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 87px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-color: #ebebeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.button {
        font-size: 30px;
        width: 120px;
        height: 60px;
    }
.boolCenter{
    flex-direction: row;
    align-items: center;
}
.boolLeftword{
    font-size: 30px;
    color: #333333;
}

.list-input-item {
        width: 750px;
        height: 90px;
        flex-direction: row;
        align-items: center;
        border-bottom-color: #e4e4e4;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: #fafafa;
        position: relative;

    }
.input {
        padding-right: 50px;
        flex: 1;
        height: 90px;
        text-align: right;
        font-size: 28px;
    }
    .rx{
        font-size: 30px;
        color: #333333;
    }
    .num1{
        height: 28;
        width: 28;
        border-radius: 100;
        background-color: #f7b027;
        text-align: center;
        line-height: 28;
        color: #ffffff;
        margin-left: 10px;
    }
    .downIcon{
        width: 80px;
        height: 90px;
        color: #bbb;
        position: absolute;
        right: 20px;
        top: 0;
        
    }
    .Downinnerbox{
        flex-direction: row;
        align-items: center;
        height: 120;
        padding-left: 40px;
    }
    .imgDowninnerbox{
        border-radius: 8px;
        

    }
    .Downinnertext{
        font-size: 28px;
        color: #333;
        margin-left: 20px;
    }
    .DowninnerIcon{
        width: 50px;
        height: 50px;
        color: #999;
        margin-left: 20px;
    }

    .resultShowCneterrightWorld{
    margin-left:30px;
}
.resultShowImageBox{
    width:76;
    height:76;
    margin-left:40px;
    border-radius: 8;
    }
.resultShowImagetext{
    width:90;
    position:absolute;
    bottom:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.24);
    font-size:20px;
    height:30px;
    line-height:30px;
    color:#fff;
    text-align:center;
}

.sendpushIcon{
    width:30;
    height:25;
    color:#999;
}
.sendPushBtn{
    color:#999;
    font-size:32;
}
.resultShowItem{
    flex-direction: row;
    align-items: center;
    height: 120;
}
.resultShowCneterWorld{
    margin-left:20px;
    width:345x;
}
.resultShowIcon{
    width:100px;
    height:120px;
    margin-left:20px;
    color:#999;
}
.resultShowCneterrightBtn{
    width:120px;
    height:46px;
    color:#999;
  
    flex-direction:row;
    justify-content:center;
    align-items:center;

}
.resultShowCneterWorldTit{
    font-size: 30px;
    color: #333;
}



</style>
